<template>
	<page-meta :page-style="'overflow:' + (timeShow ? 'hidden' : 'visible')">
		<view class="page must_know" :style="{ 'min-height': h + 'px','padding-top': (mt) + 'px' }">
		<!-- 	<u-icon :customStyle="{position: 'absolute',left: '30rpx',top:'70rpx','z-index':20,color:'#fff'}"
				name="arrow-left" v-if="scrollTop<60" size="44" :color="leftIconColor" @tap="toBack()"></u-icon> -->
			<c-nav-bar :title="titleHeader"></c-nav-bar>
			<u-swiper :list="coverImage" @change="e => currentNum = e.current" :autoplay="true" :circular="true"
				indicatorStyle="right: 20px;bottom:40px" height='612rpx' style="margin-bottom: 30rpx;">
				<view slot="indicator" class="indicator-num">
					<text class="currentNum">{{ currentNum + 1 }}/{{ coverImage.length }}</text>
				</view>
			</u-swiper>
			<view class="info">
				<view class="name">{{ jointName }}</view>
				<view class="remarks" v-if="scenicLabelList.length > 0">
					<text v-for="(item, index) in scenicLabelList" :key="index" class="flagText">{{ item }}</text>
				</view>
				<view class="bot">
					<text>￥</text>
					<text>{{ startPrice }}</text>
					<text style="padding: 0 5rpx;">起</text>
					<text>/</text>
					<text>人</text>
				</view>
			</view>
			<!-- 日期选择 -->
			<view class="book">
				<view class="tit"> 选择船票出游日期 </view>
				<view class="date">
					<view :class="['item', index == currentDate ? 'itemSelected' : '']" v-for="(item, index) in dateArr"
						:key="index" @click="handleDate(item, index, 1)">
						<text>{{ weeks[item.week] }}</text>
						<text>{{ item.time }}</text>
					</view>
					<view class="item" @click="moreDate(1)">
						<text>更多</text><text>日期</text>
					</view>
				</view>
				<!-- 单程 -->
				<view class="tit"> 选择航班 </view>
				<view class="flight">
					<view class="line"></view>

					<view class="p">
						<text>出发地点</text>
						<text class="circle"></text>
						<text>{{ info2.startPortName }}</text>
					</view>
					<view class="p">
						<text>抵达地点</text>
						<text class="circle to"></text>
						<text>{{ info2.endPortName }}</text>
					</view>
					<view class="timesCheck">
						<text class="keyword">航班时间</text>
						<text v-if="info2.boatList.length == 0" class="noTicket">当日已无出行航班，请选择其他日期</text>
						<view class="timesCheckData" v-else>
							<view :class="['item', index == boatIndex ? 'itemSelected' : '']"
								v-for="(item, index) in info2.boatList" :key="index"
								@click="item.pubTotalCount == 0 ? '' : boat(item, index)">
								<text>{{ item.sailTime }}</text>
								<text>余{{ item.pubTotalCount }}</text>
								<text class="boat">{{ item.clxm }}</text>
								<view class="cover" v-if="item.pubTotalCount == 0"></view>
							</view>
						</view>
					</view>
					<view class="timesCheck" v-if="boatIndex != null">
						<text class="keyword">选择舱位</text>
						<view class="timesCheckData">
							<view :class="['item', index == cabinIndex ? 'itemSelected' : '']"
								v-for="(item, index) in cabinList" :key="index"
								@click="item.pubCurrentCount == 0 ? '' : cabin(item, index)">
								<text>{{ item.className }}</text>
								<text>余{{ item.pubCurrentCount }}</text>
								<text>￥{{ item.totalPrice }}</text>
								<view class="cover" v-if="item.pubCurrentCount == 0"></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 景点日期 -->
				<view class="tit" style="border-top: 1rpx solid #F5F8FA;"> 选择景点出游日期 </view>
				<view class="date" style="border-bottom: 0;">
					<view :class="['item', index == currentDate2 ? 'itemSelected' : '']"
						v-for="(item, index) in dateArr2" :key="index" @click="handleDate(item, index, 2)">
						<text>{{ weeks[item.week] }}</text>
						<text>{{ item.time }}</text>
						<!-- <text>¥ {{jointPrice }}/人</text> -->
					</view>
					<view class="item" @click="moreDate(2)">
						<text>更多</text><text>日期</text>
					</view>
				</view>
			</view>
			<u-tabs :list="list" @click="click"
				itemStyle="width:50%;padding:22rpx 0;font-size:32rpx;color:#111;background:#fff"
				activeStyle="color:#333;font-weight:bold" lineWidth="64" lineHeight="6" lineColor="#333333"
				:current="current"></u-tabs>
			<!-- 详情图片 -->
			<template v-if="current == 0">
				<view>
					<image v-for="(img, index) in detailImgs" :key="index" class="detailImg" :src="img"
						bindload="imgInfo" mode="widthFix" :style="{ 'height': imgHeight || 0 + 'px' }"></image>
				</view>
			</template>
			<template v-else>
				<view class="content">
					<u-parse :content="info.reserveNotice"></u-parse>
				</view>
			</template>

			<view class="bnts">
				<u-button type="primary"
					customStyle="height:88rpx;border-radius:44rpx;background:#007A69;width:90%;font-size:32rpx"
					@click="createOrder()">立即预订</u-button>
			</view>
			<!-- 日期组件 -->
			<u-calendar v-if="dateType == 1" class="u-time" :show="timeShow" mode="single" :maxDate="maxDate"
				:minDate="minDate" ref="calendar" :defaultDate="defaultDate" :formatter="formatter" @confirm="confirm"
				@close="timeShow = false"></u-calendar>
			<u-calendar v-else class="u-time" :show='timeShow' ref="calendar2" @confirm="confirm"
				:minDate="minScenicDate" :linkageFalg="true" :defaultDate="scenicDefaultDate"
				@close="timeShow = false"></u-calendar>
		</view>
	</page-meta>
</template>

<script>
	var maxQueryDayNum = '';
	export default {
		data() {
			return {
				currentNum: null,
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '详情',
				jointPrice: '',
				startPrice: '',
				jointName: '',
				imgWidth: '',
				imgHeight: '',
				current: 0,
				info: {},
				scrollTop: '',
				info2: {
					startPortName: "",
					endPortName: "",
					boatList: [],
				},
				list: [{
					name: '套餐详情'
				}, {
					name: '预订须知'
				}],
				detailImgs: [],
				coverImage: ['https://fsy.shengsi.gov.cn/file/20240730/9bc1732eadc94cbc8a562ae62997f79b.png'],
				dateArr: [],
				timeShow: false,
				currentDate: 0,
				dateArr: [],
				currentDate2: 0,
				dateArr2: [],
				cabinList: [],
				cabinIndex: null,
				boatIndex: null,
				checkTime: "",
				checkTime2: "",
				startTime: {
					time: "",
					week: "",
				},
				endTime: {
					time: "",
					week: "",
				},
				weeks: ["周日", "周一 ", "周二", "周三", "周四", "周五", "周六"],
				fromData: {
					sail: {
						jointName: "",
						ticketId: 0,
						discountAmount: 0,
						linkMobile: "",
						linkName: "",
						num: 1,
						orderAmount: 0,
						realityPay: 0,
					},
					sailTicket: [],
				},
				totalMoney: 0,
				scenicLabelList: [],
				shipOrder: {},
				dataForm: {
					id: "",
					endPortNo: "",
					startPortNo: "",
					startDate: "",
				},
				sailTicketCopy: [],
				dateType: '',
				maxDate: '', //最大
				minDate: '',
				defaultDate: '',
				realTicketList: [],
				menpiaoId: '',
				minScenicDate: '',
				scenicDefaultDate: '',
			}
		},
		async onLoad(opt) {
			this.id = opt.id;
			this.jointName = opt.jointName;
			this.jointPrice = opt.jointPrice;
			this.startPrice = opt.startPrice;
			if (opt.scenicLabelList && opt.scenicLabelList != 'null') {
				this.scenicLabelList = opt.scenicLabelList.split(',');
			} else {
				this.scenicLabelList = [];
			}
			await this.getMaxDate();
			this.getInfo();
			this.dataForm.id = this.id;

			//this.getBannerImg();
			this.dataForm.id = opt.id;
			this.fromData.sail.ticketId = opt.id;
			this.fromData.sail.jointName = opt.jointName;

			this.dataForm.startDate = "2024-" + this.getDay(0).time;
			this.checkTime = this.getDay(0).time; //默认当天日期
			this.getTimeList('', 1); //最近三天
			this.getTimeList('', 2); //最近三天
		},
		filters: {
			filtersRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, (match, capture) => {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					if (newContent) {
						newContent = newContent.replace(/\<img/gi,
							'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
						return newContent;
					}
				}
			},
		},
		onPageScroll(obj) {
			this.scrollTop = obj.scrollTop;
		},
		watch: {
			checkTime(newval, oldval) {
				if (newval != oldval) {
					if (newval.indexOf("2024") > -1) {
						this.dataForm.startDate = newval;
					} else {
						this.dataForm.startDate = "2024-" + newval;
					}
					if (this.dataForm.startPortNo) {
						this.getData();
					}
					this.cabinIndex = null;
					this.boatIndex = null

				}
			},
			checkTime2(newval, oldval) {
				if (newval != oldval) {
					let isScenicTicketDTOList = this.realTicketList;
					isScenicTicketDTOList.forEach((ele, index) => {
						if (ele.calendarList) {
							let calendarList = ele.calendarList;
							calendarList.forEach((ele2, index2) => {
								if (this.isDateInRange(newval, ele2.startDate, ele2.endDate)) {
									//在日期内就取这个日期的价格
									isScenicTicketDTOList[index].realPrice = ele2.price;
								}
							})
						}
					})
				}
			}
		},
		onReady() {
			this.setUpDate();
		},
		methods: {
			toBack() {
				uni.navigateBack();
			},
			getMaxDate() {
				return new Promise((resolve, reject) => {
					this.$api.get('/travel/isshipsaleconfig/page').then(res => {
						if (res.data.code === 0) {
							if (res.data.data.list.length > 0) {
								maxQueryDayNum = (+res.data.data.list[0].wysts || 0);
								this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+
										maxQueryDayNum)))
									.Format('yyyy-MM-dd');
							}
							resolve();
						} else this.$showModal(res.data.msg);
					})
				})
			},
			//判断一个日期是否在某个日期区间内
			isDateInRange(dateToCheck, startDate, endDate) {
				const date1 = new Date(dateToCheck);
				const date2 = new Date(startDate);
				const date3 = new Date(endDate);

				return date1 >= date2 && date1 <= date3;
			},
			// 设置选择日期天数
			setUpDate() {
				const d = new Date()
				const year = d.getFullYear()
				let month = d.getMonth() + 1
				const date = d.getDate() + 4
			},

			formatter(day) {
				if (maxQueryDayNum) {
					// let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
					// 	'yyyy-MM-dd');
					const now = new Date().getFullYear() + '-' + day.month.toString().padStart(2, '0') + "-" + day.day
						.toString().padStart(2, '0');
					for (let i = 0; i <= maxQueryDayNum; i++) {
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},

			moreDate(type) {
				this.dateType = type;
				this.timeShow = true
				if (type == 1) {
					this.$nextTick(() => {
						this.$refs.calendar.setFormatter(this.formatter);
					})
				}
				let nowYear = new Date().getFullYear()
				let date = this.dateArr[this.currentDate];
				this.minScenicDate = nowYear + '-' + date.time

			},
			//获取数据
			getData() {
				this.$api
					.get("/api/shipScenic/getWriteOrder", this.dataForm)
					.then((res) => {
						if (res.data.code === 0) {
							if (res.data.data && res.data.data.length > 0) {
								this.info2.boatList = [];
								for (let i = 0; i < res.data.data.length; i++) {
									this.info2.startPortName = res.data.data[0].startPortName;
									this.info2.endPortName = res.data.data[0].endPortName;
									let json = {
										sailTime: res.data.data[i].sailTime,
										pubTotalCount: res.data.data[i].priceAndTotalCount.pubTotalCount,
										clxm: res.data.data[i].clxm,
										cabinList: res.data.data[i].seatClasses,
										info: res.data.data[i],
									};
									this.info2.boatList.push(json);
								}
								this.cabinList = this.info2.boatList[0].cabinList;
							} else {
								this.cabinIndex = null;
								this.cabinIndex = null;
								this.cabinList = [];
								this.info2.boatList = [];
								this.$showToast("暂无查到船票信息,请稍后重新刷新页面");
							}
						} else this.$showModal(res.data.msg);
					});
			},
			getTimeList(currentDate, type) {
				let dateArr = [];
				for (let i = 0; i < 4; i++) {
					let date = this.getDay(i, currentDate);
					dateArr.push(date);
				}
				if (type == 1) {
					this.dateArr = dateArr;
					this.checkTime = this.dateArr[this.currentDate].time;
				} else {
					this.dateArr2 = dateArr;
				}
				let nowYear = new Date().getFullYear()
				let nowDay = this.getDay(0, '').time
				if (currentDate) {
					this.minScenicDate = currentDate.indexOf(nowYear) > -1 ? currentDate : nowYear + '-' + currentDate
					this.currentDate2 = 0;
					this.checkTime2 = this.scenicDefaultDate;
				} else {
					this.minScenicDate = nowYear + '-' + nowDay
				}
				this.scenicDefaultDate = this.minScenicDate;
			},
			getDay(day, current) {
				if (current) {
					current = current.length == 5 ? (new Date().getFullYear() + '-' + current) : current
					var today = new Date(current);
				} else {
					var today = new Date();
				}
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
				today.setTime(targetday_milliseconds); //注意，这行是关键代码
				var tYear = today.getFullYear();
				this.currentYear = tYear;
				var tMonth = today.getMonth();
				var tDate = today.getDate();
				var week = today.getDay();
				tMonth = this.doHandleMonth(tMonth + 1);
				tDate = this.doHandleMonth(tDate);
				let json = {
					time: tMonth + "-" + tDate,
					week: week
				};
				return json;
			},
			doHandleMonth(month) {
				var m = month;
				if (month.toString().length == 1) {
					m = "0" + month;
				}
				return m;
			},
			//选择更多日期
			handleDate(item, index, type) {
				let nowYear = new Date().getFullYear()
				let nowDay = this.getDay(0, '').time
				if (type == 1) {
					this.currentDate = index;
					this.checkTime = item.time;
					this.currentDate2 = 0
					// this.getTimeList(item.time, 2)
					let dateArr = [];
					for (let i = 0; i < 4; i++) {
						let date = this.getDay(i, item.time);
						dateArr.push(date);
					}

					this.dateArr2 = dateArr;

					this.minScenicDate = nowYear + '-' + item.time
					this.scenicDefaultDate = nowYear + '-' + item.time
					this.checkTime2 = this.scenicDefaultDate;
				} else if (type == 2) {
					this.currentDate2 = index;
					this.checkTime2 = nowYear + '-' + item.time;
					this.minScenicDate = nowYear + '-' + nowDay
					this.scenicDefaultDate = nowYear + '-' + item.time
				}
			},
			//单程确认选择日期
			confirm(e) {
				let days = this.daysDistance(e[0]); //距离今天差几天 减去1,
				let newDate = this.currentYear + '-' + this.getDay(maxQueryDayNum - 3).time;
				if (this.dateType == 1) {
					if (days < maxQueryDayNum - 3) {
						this.currentDate = 0;
						//this.checkTime = e[0];
						this.getTimeList(e[0], 1);
					} else {
						this.currentDate = days - (maxQueryDayNum - 3) > 0 ? days - (maxQueryDayNum - 3) : 0;
						let tempCheckTime = days - (maxQueryDayNum - 3) > 0 ? newDate : e[0];
						this.getTimeList(tempCheckTime, 1);
					}
					this.getTimeList(e[0], 2)
				} else {
					// this.currentDate2 = 0;
					// this.checkTime2 = e[0];
					this.getTimeList(e[0], 2);
				}
				this.timeShow = false;
			},
			daysDistance(date2) {
				let date1 = Date.parse(new Date());
				date2 = Date.parse(date2);
				//计算两个日期之间相差的毫秒数的绝对值
				var distance = Math.abs(date2 - date1);
				//毫秒数除以一天的毫秒数,就得到了天数
				var days = Math.floor(distance / (24 * 3600 * 1000)) + 1;
				return days;
			},
			// 选择航线时间
			boat(item, index) {
				this.cabinList = this.info2.boatList[index].cabinList;
				this.boatIndex = index; //
			},
			// 选择航线时间
			cabin(item, index) {
				this.cabinIndex = index;
			},
			getInfo() {
				this.$api.get('/api/shipScenic/getShipScenicInfo', {
					id: this.id,
				}).then(res => {

					if (res.data.code === 0) {
						this.info = res.data.data;
						this.detailImgs = res.data.data.tpDetailsList;
						for (let i = 0; i < res.data.data.spotList.length; i++) {
							this.total += parseFloat(res.data.data.spotList[i].startPrice);
							// this.coverImage.push(res.data.data.spotList[i].coverImage);
						}
						let temp = []
						res.data.data.picDTOList.map(item => {
							temp.push(item.scenicPic);
						})
						if(temp.length>0) this.coverImage = temp;
						this.dataForm.startPortNo = this.info.startPortNo;
						this.dataForm.endPortNo = this.info.endPortNo;
						this.realTicketList = this.info.ticketList.map(item => {
							return {
								calendarList: item.calendarList,
								ticketName: item.ticketName,
								ticketType: item.ticketType,
								realPrice: item.realPrice
							}
						})
						this.checkTime2 = new Date().getFullYear() + '-' + this.getDay(0).time; //默认当天日期
						this.menpiaoId = this.info.spotList[0].menpiaoId

						this.getData();
					} else this.$showModal(res.data.msg);
				})
			},
			click(e) {
				this.current = e.index
			},
			imgInfo(event) {
				this.setData({
					imgWidth: event.detail.width,
					imgHeight: event.detail.height
				})
			},
			createOrder() {
				if (this.cabinIndex == null || this.boatIndex == null) {
					return this.$showToast('请选择舱位');
				}
				let boatInfo = this.info2.boatList[this.boatIndex];
				let cabinInfo = this.info2.boatList[this.boatIndex].cabinList[this.cabinIndex];
				let info = {
					startPortName: this.info2.startPortName,
					endPortName: this.info2.endPortName
				};
				let boatInfoStr = encodeURIComponent(JSON.stringify(boatInfo));
				let cabinInfoStr = encodeURIComponent(JSON.stringify(cabinInfo));
				let infoStr = encodeURIComponent(JSON.stringify(info));

				let date = this.dateArr[this.currentDate];

				date.time2 = this.dateArr2[this.currentDate2].time;
				date.week2 = this.dateArr2[this.currentDate2].week;
				let dateStr = encodeURIComponent(JSON.stringify(date));
				let realTicketList = JSON.stringify(this.realTicketList)
				uni.navigateTo({
					url: `/pagesTrip/packageArea/orderDetail?menpiaoId=${this.menpiaoId}&jointName=${this.jointName}&id=
			      ${this.id}&total=${this.jointPrice}&boatInfo=${boatInfoStr}&cabinInfo=${cabinInfoStr}&info=${infoStr}&dateInfo=${dateStr}&realTicketList= ${encodeURIComponent(realTicketList)}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item__text.data-v-48634e29 {
		font-size: 16px !important;
		color: #333;
	}

	/deep/.u-calendar-header__title {
		color: #111 !important;
		height: auto !important;
		padding: 32rpx 0 40rpx;
		line-height: 45rpx !important;
	}

	/deep/.u-calendar-header {
		margin-bottom: 80rpx;
		padding: 0 !important;
		position: relative;
	}

	/deep/.u-calendar-header__subtitle {
		position: absolute;
		height: auto !important;
		bottom: -80rpx;
		width: 100%;
		padding: 18rpx 40rpx;
		text-align: left !important;
		box-sizing: border-box;
		line-height: 25px !important;
		background: #F4F5F5;
		color: #111 !important;
		font-size: 32rpx !important;
	}

	/deep/.u-calendar__confirm {
		margin-top: 50px;
		margin-bottom: 20rpx;

		.u-button {
			width: 100% !important;
			height: 88rpx !important;
			font-size: 32rpx !important;
			letter-spacing: 2px;
		}
	}

	/deep/.u-calendar-header__weekdays {
		margin-bottom: 16rpx;

		.u-calendar-header__weekdays__weekday {
			font-size: 28rpx !important;
			line-height: 40px !important;
			color: #111 !important;
		}
	}

	.page {
		padding-bottom: 130rpx;
		background-color: #F5F8FA;
		// padding-top: 130rpx;
	}

	.indicator-num {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		// @include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.currentNum {
		padding: 4rpx 16rpx;
		// background-color: rgba(0, 0, 0, 0.35);
		border-radius: 16rpx;
		width: fit-content;
		@include flex;
		justify-content: center;
		color: #FFFFFF;
	}

	.bnts {
		position: fixed;
		padding: 12rpx 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		z-index: 1;
		left: 0
	}

	.noTicket {
		font-size: 24rpx;
		margin-left: 64rpx;
		color: #FF7D01;
	}

	// 航线，舱位
	.flight {
		position: relative;

		.line {
			left: 133rpx;
			position: absolute;
			top: 36rpx;
			height: 30rpx;
			width: 4rpx;
			background-color: #d8d8d8;
		}

		.p {
			text {
				display: inline-block;
				font-size: 24rpx;
				margin-bottom: 32rpx;

				&:nth-child(1) {
					color: #777;
				}

				&:nth-child(3) {
					color: #333;
				}

				&.circle {
					margin: 0 20rpx 0 36rpx;
					width: 14rpx;
					height: 14rpx;
					border-radius: 100%;
					background-color: #007A69;

					&.to {
						background-color: #ff4141;
					}
				}
			}
		}

		.timesCheck {
			display: flex;
			margin-bottom: 40rpx;

			.keyword {
				display: inline-block;
				font-size: 24rpx;
				height: 124rpx;
				color: #777;
			}

			.timesCheckData {
				display: flex;
				width: 200rpx;
				height: 150rpx;
				flex: 1;
				margin: 0 0 0 36rpx;
				gap: 16rpx;
				// padding-bottom: 10px;
				overflow: auto;

				.item {
					position: relative;
					border: 2rpx solid #efefef;
					width: 128rpx;
					min-width: 128rpx;
					border-radius: 16rpx;
					padding: 22rpx 0;
					box-sizing: border-box;

					.cover {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						right: 0;
						background: rgba(0, 0, 0, 0.08);
						z-index: 1;
						border-radius: 16rpx;
					}

					text {
						display: block;
						font-size: 24rpx;
						text-align: center;
						color: #999;

						&:nth-child(1) {
							color: #111;
							margin-bottom: 6rpx;
						}
					}

					.boat {
						box-sizing: border-box;
						position: absolute;
						margin: 10rpx 14rpx 0;
						border-radius: 10rpx;
						width: 99rpx;
						height: 30rpx;
						color: #fff;
						font-size: 20rpx;
						// bottom: -16rpx;
						background-color: #AAAAAA;
					}

					&.itemSelected {
						background-color: #f3fcff;
						font-weight: bold;
						border: 1rpx solid #007A69;

						text {
							color: #007A69;

							&:nth-child(1) {
								color: #007A69;
							}
						}

						.boat {
							background-color: #007A69;
							color: #fff;
						}

					}
				}
			}
		}
	}


	.book {
		background-color: #fff;
		margin: 20rpx 0 0;
		padding: 0 24rpx;
		border-bottom: 20rpx solid #F5F8FA;

		.tit {
			font-size: 30rpx;
			color: #333;
			padding: 36rpx 0;
			font-weight: 600;
		}



		.date {
			display: grid;
			grid-template-columns: auto auto auto auto 120rpx;
			gap: 20rpx;
			padding-bottom: 36rpx;
			border-bottom: 1rpx solid #efefef;

			.item {
				padding: 18rpx 0;
				border: 2rpx solid #EFEFEF;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;
				height: 104rpx;
				box-sizing: border-box;

				text {
					display: block;
					color: #333;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #777;
					}

					&:nth-child(3) {
						color: #007A69;
					}
				}

				&:last-child {
					min-width: 100rpx;
					padding-top: 18rpx;

					text {
						color: #007A69;
					}
				}
			}

			.itemSelected {
				// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
				background-color: #f3fcff;
				border: 1rpx solid #007A69;
				font-size: 24rpx;
				text-align: center;
				border-radius: 16rpx;

				text {
					display: block;
					color: #007A69;

					&:nth-child(2) {
						margin: 8rpx 0;
						color: #007A69;
					}

					&:nth-child(3) {
						color: #007A69;
					}
				}

				&:last-child {
					padding-top: 40rpx;
					color: #007A69;
				}
			}
		}
	}

	.info {
		padding: 40rpx 30rpx 50rpx;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: -16px;
		position: relative;
		z-index: 1;
		background: #fff;
		border-bottom: 1px solid #EFEFEF;

		.remarks {
			margin: 20rpx 0 28rpx;
		}

		.flagText {
			font-size: 22rpx;
			border: 2rpx solid #dcc7ab;
			border-radius: 4rpx;
			line-height: 22rpx;
			padding: 0rpx 5rpx;
			margin-right: 4rpx;
			color: #c9a771;
			margin-left: 10rpx;
			&:first-child{
				margin-left: 0;
			}
		}

		.name {
			font-size: 40rpx;
			font-weight: bold;
			font-family: PingFang-SC-Bold, PingFang-SC;
			color: #111;
			margin-bottom: 20rpx;
		}

		.bot {
			text {
				color: #F95953;
				font-size: 26rpx;

				&:nth-child(2) {
					font-size: 48rpx;
					margin-top: -10rpx;
					font-weight: bold;
				}

				&:nth-child(4) {
					font-size: 32rpx;
					margin-top: -8rpx;
				}

				&:nth-child(5) {
					width: 100rpx;
					flex: 1
				}
			}
		}
	}

	.content {
		line-height: 50rpx;
		color: #666;
		font-size: 26rpx;
		padding: 24rpx 34rpx 0;
		font-family: PingFangSC-Regular, PingFang SC;
		background-color: #fff;

		.coverImg {
			margin: 0;
		}

		image {
			width: 100%;
			margin: 16rpx 0;
		}
	}

	.detailImg {
		width: 100%;
		margin: 0 !important;
	}
</style>